import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
  useEffect,
} from "react";
import PropType from "prop-types";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
import Stats from "stats.js"; //性能监控
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; // FBX 模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //模型加载器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; //模型解压缩

import "./Home.css";

import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; //// 引入CSS2模型对象CSS2DObject
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; // 引入CSS2渲染器CSS2DRenderer

const width = window.innerWidth; //屏幕宽度
const height = window.innerHeight; //屏幕高度

// 渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true, //开启优化锯齿
});
renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
renderer.setSize(width, height); // 将输出canvas的大小调整为(width, height)并考虑设备像素比，

// 相机
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0);

// 场景
const scene = new THREE.Scene();

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 12, 0);


// 性能监测 (这个不是three必须项)
const  stats = new Stats(); // 性能监测


// 创建一个CSS2渲染器CSS2DRenderer
const css2Renderer = new CSS2DRenderer();
css2Renderer.setSize(width, height);
// HTML标签<div id="tag"></div>外面父元素叠加到canvas画布上且重合
css2Renderer.domElement.style.position = 'absolute';
css2Renderer.domElement.style.top = '0px';
//设置.pointerEvents=none，解决HTML元素标签对threejs canvas画布鼠标事件的遮挡
 css2Renderer.domElement.style.pointerEvents = 'none';

const ReactDemo = () => {

  useEffect(()=>{
    animate();
    init();
  },[])

 
  function init() {
    const divID = document.getElementById('id');
    // HTML元素转化为threejs的CSS2模型对象
    const tag = new CSS2DObject(divID as HTMLElement);
    tag.position.set(50,0,50); // 文字的位置
    scene.add(tag)
  
    const container = document.createElement("div");
    document.body.appendChild(container);
   
    const light = new THREE.AmbientLight( 0x404040 );// 环境光会均匀的照亮场景中的所有物体。
    scene.add( light );

  
    const axesHelper = new THREE.AxesHelper( 90 ); // 辅助线
    scene.add( axesHelper );

    // 性能监测
    container.appendChild(stats.dom);

    //几何体
    const geometry = new THREE.BoxGeometry(40, 40, 40);
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
    }); // 网格模型
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(50,0,50);
    scene.add(mesh)

    document.body.appendChild(css2Renderer.domElement);

    container.appendChild(renderer.domElement);

    window.addEventListener("resize", onWindowResize);
  }

  function onWindowResize() {
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    renderer.setSize(width, height);
  }

  //

  function animate() {
    requestAnimationFrame(animate);
    css2Renderer.render(scene, camera);
    renderer.render(scene, camera);
    controls.update();
    stats.update();
  }
  return (
    <>
      <div id="id">标签内容</div>
    </>
  );
};

export default ReactDemo;
